<template>
	<div class="feedback-cont">
		<div class="feedback-form">
			<el-form ref="ruleForm" :rules="rules" :model="params" label-width="100px" :inline="true">
				<div class="form-title">反馈</div>
				<el-form-item label="学校名称" prop="schoolName">
					<el-input v-model="params.schoolName"></el-input>
				</el-form-item>
				<el-form-item label="学校部门" prop="department">
					<el-input v-model="params.department"></el-input>
				</el-form-item>
				<el-form-item label="事由" prop="reason">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="params.reason"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" prop="contactInformation">
					<el-input v-model="params.contactInformation"></el-input>
				</el-form-item>
				<el-form-item label="联系人" prop="contacts">
					<el-input v-model="params.contacts"></el-input>
				</el-form-item>
				<el-form-item label="是否开通试用" prop="needTrial">
					<el-radio v-model="params.needTrial" label="1">开通</el-radio>
					<el-radio v-model="params.needTrial" label="2">暂不开通</el-radio>
				</el-form-item>
				<el-form-item class="full-item">
					<el-button type="primary" @click="submitForm('ruleForm')">反馈</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		saveFeedBackApi
	} from '@/api/Login'
	export default {
		data() {
			return {
				params: {

				},
				rules: {
					email: [{
						required: true,
						message: '请输入正确邮箱',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.saveFeedback()
					} else {
						return false;
					}
				});
			},
			saveFeedback() {
				let params = this.params
				saveFeedBackApi(params).then(res => {
					if (res.code == 200) {
						this.$message({
							showClose: true,
							message: '反馈成功',
							type: 'success'
						});
						this.$refs['ruleForm'].resetFields();
						this.$router.back()
					}
				})
			}
		},
	}
</script>

<style lang="less">
	@contWidth: 926px;

	.feedback-cont {
		background-color: #F7F7F7;
		padding: 60px 20px;
		min-height: calc(100vh - 120px);

		.feedback-form {
			width: @contWidth;
			margin: 0 auto;
			background-color: #fff;
			padding: 20px;
			box-shadow: 0px 2px 17px 0px rgba(233, 206, 26, 0.01);
			border-radius: 10px;
			padding: 30px 0 119px 48px;
		}

		.form-title {
			padding: 15px 0 20px;
			font-size: 20px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.el-form--inline .el-form-item {
			margin: 0 48px 16px 0;
		}

		.el-form-item__content {
			width: 273px;
		}

		.el-select {
			width: 273px;
		}

		.el-cascader {
			width: 273px;
		}

		.el-date-editor.el-input,
		.el-date-editor.el-input__inner {
			width: 273px;
		}

		.full-item {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 50px;

			.el-form-item__content {
				width: initial;
			}
		}

		.el-button {
			width: 415px;
			height: 54px;
			background: #FCDE14 linear-gradient(129deg, #3CA7FF 0%, #0087FF 100%);
			border-radius: 27px;
			font-size: 20px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>